<template>
  <div class="component-makeBudget">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>概预算
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>后退
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            概预算
          </p>
          <div class="right">
            <!-- 表一按钮 -->
            <!-- <el-button
              v-show="activeName=='first'"
              @click="baseConfigSelect"
              style="width:130px;"
              class="iconfont"
            >&#xe628; 设置基础参数</el-button> -->
            <!-- <el-button v-show="activeName=='first'" @click="proListInit">选择项目</el-button> -->
            <!-- 表二按钮 -->
            <!-- <el-button
              v-show="activeName=='second'"
              @click="baseConfigSelect"
              style="width:130px;"
              class="iconfont"
            >&#xe628; 设置基础参数</el-button> -->
            <!-- 表三按钮 -->
            <!-- <el-button
              v-show="activeName == 'third'"
              @click="baseConfigSelect"
              style="width:130px;"
              class="iconfont"
            >&#xe628; 设置基础参数</el-button>-->
            <!-- <el-button v-show="activeName=='third'" @click="edit(3)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
            <el-button style="width:70px;" v-show="activeName=='third'" @click="commit(3)">保存</el-button> -->
            <!-- 表四按钮 -->
            <!-- <el-button v-show="activeName=='fourth'" @click="edit(4)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
            <el-button style="width:70px;" v-show="activeName=='fourth'" @click="commit(4)">保存</el-button> -->
            <!-- 表五按钮 -->
            <!-- <el-button
              v-show="activeName=='fifth'"
              @click="baseConfigSelect"
              style="width:130px;"
              class="iconfont"
            >&#xe628; 设置基础参数</el-button> -->
            <!-- <el-button v-show="activeName=='fifth'" @click="edit(5)">{{editBtn?'进行编辑':'取消编辑'}}</el-button>
            <el-button style="width:70px;" v-show="activeName=='fifth'" @click="commit(5)">保存</el-button>-->
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-header">
      <el-tab-pane label="工程预算总表（表一）" name="first">
        <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(1)">设置基础参数</el-button>
            <el-button @click="checkmetar=true">选择项目</el-button>
          </div>
        </div>-->
        <div class="budgets">
          <div class="budget">
            <div class="title">工程预算总表</div>
            <div></div>
          </div>
          <div class="budgetTable">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <th>费用名称</th>
                <th>需要安装的设备费</th>
                <th>建筑安装工程费</th>
                <th>其他费用</th>
                <th>除税价</th>
                <th>增值税</th>
                <th>含税价</th>
              </tr>
              <!--v-for="(item,index) in tab1" :key="index"-->
              <tr v-for="(item,index) in tab1" :key="index">
                <th style="width: 400px;">{{item.rowName}}</th>
                <td></td>
                <td></td>
                <td></td>
                <td>{{item.taxExcludingPrice}}</td>
                <td></td>
                <td></td>
              </tr>
              <!--<tr>
                <th style="color:#1abc9c;">总造价：</th>
                <td colspan="6">20000000</td>
              </tr>-->
            </table>
          </div>
          <div class="gcl_footer">
            <div class="gcl_footer_bottom">
              <span>预计工程总造价：</span>
              <span v-show="totalBudget=='待计算'">{{totalBudget}}</span>
              <span v-show="totalBudget!='待计算'">{{totalBudget|numFilter}}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="建筑安装工程费（表二）" name="second">
        <!-- <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <el-button @click="setBaseConfig(2)">设置基础参数</el-button>
          </div>
        </div>-->
        <div class="budgets">
          <div class="dbTable">
            <div class="budgetTable">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <th>费用名称</th>
                  <th>依据和计算方法</th>
                  <th>合计（元）</th>
                </tr>
                <tr v-for="(item,index) in aLists" :key="index">
                  <th>{{item.rowName}}</th>
                  <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                  <td>{{item.taxExcludingPrice}}</td>
                </tr>
              </table>
            </div>
            <div class="budgetTable">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <th>费用名称</th>
                  <th>依据和计算方法</th>
                  <th>合计（元）</th>
                </tr>
                <tr v-for="(item,index) in bLists" :key="index">
                  <th>{{item.rowName}}</th>
                  <td style="width:200px;padding:0 5px;">{{item.rowRule}}</td>
                  <td>{{item.taxExcludingPrice}}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="gcl_footer">
            <div class="gcl_footer_bottom">
              <span>预计工程总造价：</span>
              <span v-show="totalBudget=='待计算'">{{totalBudget}}</span>
              <span v-show="totalBudget!='待计算'">{{totalBudget|numFilter}}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <el-dropdown slot="label" trigger="hover" @command="handleCommand">
          <span class="el-dropdown-link">
            <!-- :style="activeName=='third'?'color:#1abc9c;':''" -->
            工程量预算（表三）
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="工程量预算表三甲">工程量预算表三甲</el-dropdown-item>
            <el-dropdown-item command="机械使用费表三乙">机械使用费表三乙</el-dropdown-item>
            <el-dropdown-item command="仪表使用费表三丙">仪表使用费表三丙</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="fl_container">
          <div class="fl_left">{{thirdTitle}}</div>
          <div class="fl_right">
            <!-- <el-button @click="setBaseConfig(3)">设置基础参数</el-button>
            <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="edit(3)">{{editBtn?'编辑':'取消'}}</el-button>
            <el-button v-show="thirdTitle == '工程量预算表三甲'" @click="commit(3)">保存</el-button>-->
          </div>
        </div>
        <div class="table" v-if="thirdTitle=='工程量预算表三甲'">
          <el-table
            ref="multipleTable"
            :data="thirdInfo"
            tooltip-effect="dark"
            :summary-method="getSummaries"
            style="width: 1100px;margin:0 auto"
            border
            show-summary
            sum-text="总计"
          >
            <el-table-column label="施工分类" align="center" width="95" prop="budgetItemType">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemType" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="定额编号" align="center" width="120" prop="quotaCode">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.budgetItemName" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="单位" align="center" width="100" prop="quotaUnit">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaUnit" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="数量" align="center" width="100" prop="num">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.num" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="单位定额值(工日)技工" align="center" width="140" prop="techWorker">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.techWorker" :disabled="thirdFlag"></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="单位定额值(工日)普工" width="140" prop="normalWorker">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template>-->
            </el-table-column>
            <el-table-column label="合计值(工日)技工" width="140" prop="techWorkerTotal">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.techWorkerTotal"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计值(工日)普工" width="140" prop="normalWorkerTotal">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorkerTotal"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
          </el-table>
        </div>
        <div class="table" v-if="thirdTitle=='机械使用费表三乙'">
          <el-table
            ref="multipleTable"
            :data="thirdTwoInfo"
            :summary-method="getSummaries"
            tooltip-effect="dark"
            style="width: 1100px;margin:0 auto"
            border
            show-summary
            sum-text="总计"
          >
            <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位" align="center" width="100" prop="budgetItemType">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="数量" align="center" width="100" prop="num">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.num" :disabled="thirdFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="机械名称" align="center" width="140" prop="macName">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.quantityTotal"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.costMoney"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
          </el-table>
        </div>
        <div class="table" v-if="thirdTitle=='仪表使用费表三丙'">
          <el-table
            ref="multipleTable"
            :data="thirdThreeInfo"
            tooltip-effect="dark"
            :summary-method="getSummaries"
            style="width: 1100px;margin:0 auto"
            border
            show-summary
            sum-text="总计"
          >
            <el-table-column label="定额编号" align="center" width="110" prop="quotaCode">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaCode" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="项目名称" align="center" width="400" prop="budgetItemName">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.quotaName" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位" align="center" width="100" prop="budgetItemType">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="thirdFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="数量" align="center" width="100" prop="num">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.num" :disabled="thirdFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="仪表名称" align="center" width="140" prop="macName">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位定额值数量（台班）" align="center" width="140" prop="quantity">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单位定额值单价（元）" align="center" width="140" prop="price">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计值数量（台班）" align="center" width="140" prop="quantityTotal">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计值合价（元）" align="center" width="140" prop="costMoney">
              <!-- <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model.number="scope.row.normalWorker"
                  :disabled="thirdFlag"
                ></el-input>
              </template> -->
            </el-table-column>
          </el-table>
        </div>
        <div class="gcl_footer">
          <div class="gcl_footer_bottom">
            <span>预计工程总造价：</span>
            <span v-show="totalBudget=='待计算'">{{totalBudget}}</span>
            <span v-show="totalBudget!='待计算'">{{totalBudget|numFilter}}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <el-dropdown slot="label" trigger="hover" @command="handleCommand1">
          <span class="el-dropdown-link">
            器材预算（表四）
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="width:150px;">
            <el-dropdown-item command="甲供设备">甲供设备</el-dropdown-item>
            <el-dropdown-item command="甲供主材">甲供主材</el-dropdown-item>
            <el-dropdown-item command="乙供主材">乙供主材</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="fl_container">
          <div class="fl_left">{{fourthTitle}}</div>
          <div class="fl_right">
            <!-- <el-button @click="edit(4)">{{editBtn?'编辑':'取消'}}</el-button>
            <el-button @click="commit(4)">保存</el-button>-->
          </div>
        </div>
        <div class="table">
          <el-table
            ref="multipleTable"
            :data="fourthInfo"
            tooltip-effect="dark"
            style="width: 1100px;margin:0 auto"
            :summary-method="getSummaries"
            border
            show-summary
            sum-text="总计"
          >
            <el-table-column label="主要材料" align="center" width="200" prop="typeName">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.Name" :disabled="fourthFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="规格程式" align="center"  prop="mat">
              <!-- <template slot-scope="scope">
                <el-select
                  v-model="scope.row.matId"
                  :disabled="fourthFlag"
                  placeholder="请选择"
                  style="width:335px;"
                >
                  <el-option v-for="(item,index) in scope.row.matlist" :key="index" :label="item.mat" :value="item.matId"></el-option>
                </el-select>
              </template> -->
            </el-table-column>
            <el-table-column label="单位" align="center" width="80" prop="matUnit">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.unit" :disabled="fourthFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="数量" align="center" width="80" prop="num">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.num" :disabled="fourthFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="单价(元)" align="center" width="105" prop="taxExcludingPrice">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.taxExcludingPrice" :disabled="fourthFlag"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column label="合计(元)" align="center" width="105" prop="taxExcludingPriceSum">
              <!-- <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.taxExcludingPriceSum" :disabled="fourthFlag"></el-input>
              </template> -->
            </el-table-column>
            <!-- <el-table-column label="备注" align="center" prop>
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.data" :disabled="fourthFlag"></el-input>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="gcl_footer">
          <div class="gcl_footer_bottom">
            <span>预计工程总造价：</span>
            <span v-show="totalBudget=='待计算'">{{totalBudget}}</span>
            <span v-show="totalBudget!='待计算'">{{totalBudget|numFilter}}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="工程建设其他费（表五）" name="fifth">
        <div class="fl_container">
          <div class="fl_left"></div>
          <div class="fl_right">
            <!-- <el-button @click="setBaseConfig(5)">设置基础参数</el-button>
            <el-button @click="edit(5)">{{editBtn?'编辑':'取消'}}</el-button>
            <el-button @click="commit(5)">保存</el-button>-->
          </div>
        </div>
        <div class="budgets">
          <div class="budget">
            <div class="title">工程建设其他费用表</div>
            <div></div>
          </div>
          <div class="budgetTable procurementListTable">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <th>费用名称</th>
                <th>除税价</th>
                <th>增值税</th>
                <th>含税值</th>
                <th>备注</th>
              </tr>
              <tr v-for="(item,index) in tab1" :key="index">
                <th style="width: 260px;">{{item.rowName}}</th>
                <!-- <td
                  style="width: 200px;"
                  v-if="item.rowCode == 'B5_ex_8' || item.rowCode == 'B5_ex_17'"
                >
                  <el-input
                    style="text-align: center;"
                    v-model="item.taxExcludingPrice"
                    :disabled="fifthFlag"
                  ></el-input>
                </td>-->
                <td style="width: 200px;">{{item.taxExcludingPrice}}</td>
                <!-- v-if="item.rowCode != 'B5_ex_8' && item.rowCode != 'B5_ex_17'" -->
                <td>
                  <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                </td>
                <td>
                  <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                </td>
                <td>
                  <!--<el-input v-model="fifth" :disabled="fifthFlag"></el-input>-->
                </td>
              </tr>
            </table>
          </div>
          <div class="gcl_footer">
            <div class="gcl_footer_bottom">
              <span>预计工程总造价：</span>
              <span v-show="totalBudget=='待计算'">{{totalBudget}}</span>
              <span v-show="totalBudget!='待计算'">{{totalBudget|numFilter}}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { log } from "util";
export default {
  name: "contractList",
  data() {
    return {
      radio2: "",
      // 当前选的项目id
      currentProId: '',
      // 配置材料弹窗bool值 --- 弹窗列表数据
      disedit: false,
      diseditProId: "",
      diseditInfo: [],
      // 配置材料弹窗 -- 勾选的数据
      chooseMaterial: [],

      // 选项卡值
      activeName: "first",
      // third 表三甲 表格数据
      thirdInfo: [],
      // third 表三丙 表格数据
      thirdTwoInfo: [],
      // third 表三乙 表格数据
      thirdThreeInfo: [],
      // fourth 表格数据
      fourthInfo: [],
      info: [],

      // 预计工程总造价
      totalBudget: "待计算",

      fifth: "",
      fifthFlag: true,

      editBtn: true, //是否可编辑

      thirdFlag: true,
      thirdTitle: "工程量预算表三甲", //表三sub title

      fourthFlag: true,
      fourthTitle: "甲供设备", //表示sub title

      baseConfig: false,
      baseConfigInfo: {},
      // 选择项目 弹窗bool值---弹窗列表数据
      choosePro: false,
      chooseProInfo: [],
      // 表单验证
      rules: {
        skipfiber: [
          { required: true, message: "请输入跳纤点数量", trigger: "blur" }
        ],
        workDiscount: [
          { required: true, message: "请输入施工折扣率", trigger: "blur" }
        ],
        taxRate: [
          { required: true, message: "请输入施工单位税率", trigger: "blur" }
        ],
        slaTimeout: [{ required: true, message: "请选择", trigger: "change" }],
        macTon: [{ required: true, message: "请输入吨数", trigger: "blur" }],
        totalHouse: [
          { required: true, message: "请输入总户数", trigger: "blur" }
        ],
        materialInput: [
          {
            required: true,
            message: "请输入零星材料、资料录入",
            trigger: "blur"
          }
        ],
        disignerProvider: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        dropPoint: [
          { required: true, message: "请输入降点数", trigger: "blur" }
        ]
      },
      tab1: [], //表一的数据
      aLists: [], //表二左侧的数据
      bLists: [], //表二右侧的数据
      maxArr: [],
      max: ""
    };
  },
  created() {},
  mounted() {
    this.currentProId = this.$route.params.proId;
    this.tabClick('1.1')
  },
  methods: {
    //标签页切换
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.tabClick("1.1");
      } else if (tab.name == "second") {
        this.secondTab();
      } else if (tab.name == "fourth") {
        this.fourthTab();
      } else if (tab.name == "third") {
        this.thirdTab();
      } else {
        this.tabClick("5");
      }
      console.log(tab.name);
      this.editBtn = true;
    },
    //1  5
    tabClick(n) {
      let that = this;
      let suCb = function(res) {
        that.tab1 = res.data.data;
        if(res.data.data.length > 0 ){
          console.log(1.1001)
          that.totalBudget =
          res.data.data.filter(item => {
            if (item.rowCode == "B1_ex_15") {
              return item.taxExcludingPrice;
            }
          })[0].taxExcludingPrice + ""
        }else{
          that.totalBudget='待计算'
        };
        console.log(res.data, that.totalBudget);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {
        proId: that.currentProId,
        sheetCode: n,
        settlementType: '0'
      };
      let palyParam = {
        url: "/api/web/proBudgetTableCol/selectProBugetTable15",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    //2
    secondTab() {
      let that = this;
      let suCb = function(res) {
        that.aLists = res.data.data.alist;
        that.bLists = res.data.data.blist;
        console.log(res.data);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {
        proId: that.currentProId,
        sheetCode: "2",
        settlementType: '0'
      };
      let palyParam = {
        url: "/api/web/proBudgetTableCol/selectProBugetTable2",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    //3
    thirdTab() {
      let that = this;
      let suCb = function(res) {
        console.log(res.data);
        if(that.thirdTitle == "工程量预算表三甲"){
          that.thirdInfo = that.deepClone(res.data.data);
        }else if(that.thirdTitle == "机械使用费表三乙"){
          that.thirdTwoInfo = that.deepClone(res.data.data);
        }else{
          that.thirdThreeInfo = that.deepClone(res.data.data);
        }
      };
      let erCb = function(res) {
        console.log(res);
      };
      let palyParam = {
        url: "/api/web/proProject/queryTableThree",
        methods: "post",
        data: {
          proId: that.currentProId,
          settlementType: '0'
        },
        success: suCb,
        error: erCb
      };
      if (that.thirdTitle == "工程量预算表三甲") {
        palyParam.url = "/api/web/proProject/queryTableThree";
      } else {
        palyParam.url = "/api/web/proTableThreeMachine/selectTableThreeMachine";
        if(that.thirdTitle == '机械使用费表三乙'){
          palyParam.data={
            proId:that.currentProId,
            macType:'0',
            settlementType: '0'
          }
        }else {
          palyParam.data={
            proId:that.currentProId,
            macType:'1',
            settlementType: '0'
          }
        }
      }
      that.$https(palyParam);
    },
    
    //4
    fourthTab() {
      let that = this;
      let suCb = function(res) {
        console.log(res.data);
        that.fourthInfo = that.deepClone(res.data.data);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {
        proId: that.currentProId,
        matType: "0", // 0 1 2
        settlementType: '0'
      };
      if (this.fourthTitle == "甲供设备") {
        postData.matType = "0";
      } else if (this.fourthTitle == "甲供主材") {
        postData.matType = "1";
      } else {
        postData.matType = "2";
      }
      let palyParam = {
        url: "/api/web/proBudgetMaterial/selectBudgetMaterial",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    
    // 下拉菜单 事件处理函数
    handleCommand(command) {
      if (
        command == "工程量预算表三甲" ||
        command == "机械使用费表三乙" ||
        command == "仪表使用费表三丙"
      ) {
        this.activeName = "third";
      }

      if (this.activeName == "third") {
        this.thirdTitle = command;
        this.thirdTab();
      }
    },
    handleCommand1(command) {
      if (command == "甲供设备" || "甲供主材" || "乙供主材") {
        this.activeName = "fourth";
      }

      if (this.activeName == "fourth") {
        this.fourthTitle = command;
        this.fourthTab();
      }
    },
    // 编辑按钮 事件处理函数
    edit(tab) {
      switch (tab) {
        case 3:
          this.thirdFlag = !this.thirdFlag;
          break;
        case 4:
          this.fourthFlag = !this.fourthFlag;
          break;
        case 5:
          this.fifthFlag = !this.fifthFlag;
          break;
      }
      this.editBtn = !this.editBtn;
    },
    commit(tab) {
      switch (tab) {
        case 3:
        this.thirdCommit();
          break;
        case 4:
        this.fourthCommit();
          break;
        case 5:
          break;
      }
    },
    setBaseConfig(tab) {
      this.baseConfig = true;
    },
    // 合计  -- element自带的合计函数 进行修改
    getSummaries(param,unit) {
      // 获取列 和 表格数据
      const { columns, data } = param;
      console.log(param)
      const sums = [];
      // 对列进行遍历操作
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        // 转数字
        const values = data.map(item => Number(item[column.property]));
        // 最后两列的数据进行合计
        if (index == columns.length - 2 || index == columns.length - 1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 显示结果+上传入的单位
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = "- -";
        }
      });
      return sums;
    }
  }
};
</script>

<style scoped>
.component-listHeader .search-header {
  width: 1150px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: none;
  background-color: rgba(255, 255, 255, 1);
  margin: 30px auto 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 110px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-form-item {
  width: 310px;
  margin-bottom: 20px;
}
.component-listHeader .search-header .right button:hover {
  background-color: #1abc9c;
  color: #fff;
}
.component-listHeader .search-header .right .right-select-margin {
  margin-top: 8px;
  margin-right: 8px;
}
/* 处理a链接 */
a {
  text-decoration: none;
  color: #1abc9a;
}
a:hover {
  cursor: pointer;
}

.component-makeBudget .tabs-header {
  width: 1150px;
  box-sizing: border-box;
  margin: 0 auto 0;
}

.fl_container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.fl_container .fl_left {
  text-align: left;
}
.fl_container .fl_right {
  text-align: right;
}

/* 表格部分 */
.budget {
  margin-top: 20px;
  width: 100%;
  overflow: hidden;
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
.budget .title {
  float: left;
}
.budget div:last-of-type {
  float: right;
}
.gcl .tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}

.budgetTable table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.budgetTable table td,
th {
  height: 40px;
}

th {
  background-color: #f9fafc;
}

.gcl_footer {
  text-align: right;
  margin: 20px 0 0 0;
}

.gcl_footer .gcl_footer_bottom span {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  margin-right: 2px;
  font-size: 19px;
}

/* 双表格容器 */
.dbTable {
  display: flex;
  justify-content: space-between;
}

.dbTable .budgetTable {
  width: 540px;
}

.component-model .component-listHeader .search-header {
  width: 900px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-model .component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-model .component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-model
  .component-listHeader
  .search-header
  .right
  .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.component-model .table {
  width: 100%;
  margin: 0 auto;
}

.underTable {
  width: 100%;
  margin: 25px 0 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}
</style>
